<template>
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu :index="item.index" v-for="(item) in navMenuData" :key="item.index">
          <template slot="title"
            ><i class="el-icon-message"></i>{{item.templateName}}</template
          >
         <el-menu-item-group :title="item.title">
           <template v-for="(groupItem) in item.groups">
             <template v-if="groupItem.parent == 0">
            <el-menu-item  :key="groupItem.id" @click="navMenuEvent({path:groupItem.path,query:groupItem.query})">{{groupItem.title}}</el-menu-item>
            </template>
            <template v-else>
              <el-submenu :key="groupItem.id" :index="groupItem.index">
                <template slot="title">
                  {{groupItem.templateName}}
                </template>


                <el-menu-item-group>
                  <template>
                    <el-menu-item v-for="(childItem) in groupItem.children" :key="childItem.id" @click="navMenuEvent({path:childItem.path,query:childItem.query})">{{childItem.title}}</el-menu-item>
                  </template>
                </el-menu-item-group>

              </el-submenu>
            </template>
           </template>
         </el-menu-item-group>
        
        </el-submenu>
       
      </el-menu>
    </el-aside>

</template>
<style scoped>

.el-aside {
  color: #333;
}
</style>
<script>
import navMenuData from "@components/NavMenu/navMenuIndex.js"
export default {
    data() {
        return {
          navMenuData
        }
    },
    methods: {
        navMenuEvent(paylog){
            this.$router.push(paylog)
        }
    }
}
</script>